<template>
	<view class="pageWrapper">
		<image class="bgImg" src="@/static/images/mine/mine_bg.png" mode=""></image>
		<custom-navbar title="我的" :bgColor="bgColor"></custom-navbar>
		<view class="pageContent">
			<view class="infoArea">
				<view class="leftArea">
					<image class="avatar" src="../../static/images/mine/avatar.png" mode=""></image>	
					<view class="">
						<view class="">
							核糖体3090
						</view>
						<view class="">
							18829983090
						</view>
					</view>
				</view>
				<view class="rightArea">
					<image class="icon" src="" mode=""></image>
					<image class="icon" src="" mode=""></image>
				</view>
			</view>
			<view class="rightCenter">
				
			</view>
			<view class="myService">
				
			</view>
			<image class="aboutUs" mode="widthFix" src="@/static/images/mine/aboutUS.png"></image>
		</view>
		
	</view>
</template>

<script>
	import api from '@/api/api.js'
	export default {
		data() {
			return {
				bgColor: 'transparent',
				servceList: [{
					name: '健康档案',
					icon: '@/static/images/example.jpg'
				}]
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		computed: {
			calcPrice() {
				return this.buyNumber * this.sellPrice
			}
		},
		methods: {
			getVipInfo(){
				api.vipInfo().then(res=>{
					this.sellPrice = res.data.price
				})
			},
			goPay(){
				// uni.navigateTo({
				//       url: '/pages/webview/webview?token='+uni.getStorageSync('AUTH_TOKEN')+'&num='+this.buyNumber
				// });
				var data = {}
				var that = this
				var token = uni.getStorageSync('AUTH_TOKEN')
				if(this.userInfo.hasOpenId==1){
					data = {
						num:this.buyNumber
					}
				}else{
					data = {
						num:this.buyNumber,
						code:uni.getStorageSync('code'),
					}
				}
				api.vipPay(token,data).then(resPay=>{
					console.log(resPay.data)
					uni.requestPayment({
						provider: "wxpay",  //固定值为"wxpay"
						appid: resPay.data.appId,  // 应用ID（AppID）
						// "partnerid": resPay.data.partnerid,      // 商户号（PartnerID）
						// "prepayid": resPay.data.prepayid, // 预支付交易会话ID
						package: resPay.data.package,        // 固定值
						nonceStr:resPay.data.nonceStr, // 随机字符串
						timeStamp: resPay.data.timeStamp,        // 时间戳（单位：秒）
						signType: resPay.data.signType, // 签名，这里用的 MD5 签名
						paySign: resPay.data.paySign,
						success: function (res) {
							// var rawdata = JSON.parse(res.rawdata);
							console.log("支付成功");
							uni.showToast({
								title: '支付成功',
								icon: 'none',
								duration: 2000
							});
							that.dialogStatus = false
							that.getUserInfo()
						},
						fail: function (err) {
							that.dialogStatus = false
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 2000
							});
							console.log('支付失败:' + JSON.stringify(err));
						}
					});
				})
			},
			onChooseAvatar(e) {
				console.log(e)
			    const { avatarUrl } = e.detail 
			    this.avatar = avatarUrl
				var token = uni.getStorageSync('AUTH_TOKEN')
				api.updateUser(token,{
					avatarUrl:this.avatar,
				}).then(res=>{
					// uni.$u.toast('修改成功');
					// setTimeout(()=>{
					// 	uni.navigateBack()
					// },1500)
				})
				uni.setStorageSync('avatarUrl',avatarUrl)
			  },
			getUserInfo(){
				var token = uni.getStorageSync('AUTH_TOKEN')
				api.userInfo(token).then(res=>{
					this.userInfo = res.data
					this.avatar = res.data.avatarUrl
				})
			},
			joinVip() {
				this.dialogStatus = true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.dialogStatus = false
				// console.log('close');
			},
			// 跳转
			goPage(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			goUserInfo () {
				uni.navigateTo({
					url: '/pages/mine/userinfo'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageWrapper {
		.bgImg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			z-index: -1;
			opacity: .92;
		}
		.pageContent {
			margin: 36rpx 30rpx 0;
			.infoArea {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.leftArea {
					display: flex;
					justify-content: center;
					align-items: center;
					.avatar {
						margin-right: 26rpx;
						width:126rpx;
						height: 126rpx;
					}
				}
				.rightArea {
					.icon {
						width: 44rpx;
						height: 44rpx;
						background-color: tomato;
					}
				}
				
			}
			.rightCenter,
			.myService,
			.aboutUs {
				padding: 40rpx 30rpx;
				width: 100%;
				margin-top: 30rpx;
				background: #FFF;
				border-radius: 16rpx;
			}
		}
	}
</style>